<template>
	<view class="">
		<u-navbar title="个人中心" leftIconSize="0" bgColor="transparent" :autoBack="true" :fixed="false"></u-navbar>
		<view class="p-30">
			<view class="cards">
				<view class="flex-row justify-between" style="position: relative;">
					<view class="">
						<view class="" style="position: absolute;top: -80rpx;left: 30rpx;">
							<u-avatar :src="isLogin ? $userInfo.avatar : ''" size="60"></u-avatar>
						</view>
					</view>
					<view v-if="isLogin" class="color tags flex-row align-center justify-center" @click="swicth">
						<image src="/static/images/ggs.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
							mode="widthFix"></image>
						切换孩子
					</view>
				</view>
				<template v-if="isLogin">
					<view class="fw-700">
						{{$userInfo.username}}
					</view>
					<view class="mt-30 small-size gray-color">
						当前孩子：{{$studentInfo && $studentInfo.name}}
					</view>
				</template>
				<template v-else>
					<navigator class="text-center" style="line-height: 200rpx;" url="/pages/common/login">登录</navigator>
				</template>
			</view>

			<view class="">
				<view @click="jumpPage(item.page)" class="mt-30 flex-row align-center justify-between card p-30"
					v-for="(item,index) in baseList">
					<view class="flex-row align-center">
						<image :src="item.img" style="width: 120rpx;height: 120rpx;" mode="widthFix"></image>
						<view>{{item.title}}</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<page-tabbar :value="3" />
		<select-info ref="select" />
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				baseList: [{
						name: 'photo',
						title: '孩子信息',
						img: "/static/images/as1.png",
						page: "/pages/mine/student"
					},
					{
						name: 'lock',
						title: '监控信息',
						img: "/static/images/as2.png",
						page: "/pages/monitor/index"
					},
					{
						name: 'star',
						title: '公告信息',
						img: "/static/images/as3.png",
						page: "/pages/common/message"
					},
				]
			}
		},
		onLoad() {
			console.log(this.isLogin);
		},
		onShow() {
			this.$store.dispatch('getUserInfo');
		},
		methods: {
			swicth() {
				this.$refs.select.show = true
			},
			click(index) {
				console.log(index)
				uni.navigateTo({
					url: this.baseList[index]['page']
				})
			}
		}
	}
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.tags {
		background: rgba(108, 181, 0, 0.2);
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 10rpx;
	}

	.cards {
		width: 100%;
		min-height: 300rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: url('') no-repeat;
		background-size: 100% 100%;
		border-radius: 30rpx;
		margin-top: 120rpx;
	}

	.card {
		padding: 10rpx 30rpx;
	}
</style>